import React from 'react'
import { Button, Input, Form, Select } from 'antd'
const FormItem = Form.Item
const Option = Select.Option

class App extends React.Component {
  constructor (props) {
    super(props)
    this.state = {

    }
  }

  componentDidMount () {

  }

  render () {
    const {getFieldDecorator, countryDatasource, submitData, userName} = this.props
    const industryDatasource = [
      {id: 'Finance', name: 'Finance'},
      {id: 'Outdoors', name: 'Outdoors'},
      {id: 'Travel', name: 'Travel'},
      {id: 'We-Media', name: 'We-Media'},
      {id: 'Agency', name: 'Agency'},
      {id: 'Others', name: 'Others'}
    ]
    return <div>
      <div className='clearfix itemWrap'>
        <FormItem className='inputItem fl'>
          <p>Industry</p>
          {getFieldDecorator('industry', {
            rules: [{ required: true, message: 'Please choose industry', whitespace: true }],
            initialValue: submitData && submitData.industry
          })(
            <Select placeholder='Please choose industry'>
              {industryDatasource && industryDatasource.map((item, index) =>
                <Option value={item.id} key={item.id}>{item.name}</Option>
              )}
            </Select>
          )}
        </FormItem>
        <FormItem className='inputItem fl'>
          <p>Company</p>
          {getFieldDecorator('fullName', {
            rules: [{ required: true, message: 'Please enter your company name', whitespace: true }, {
              pattern: T.regObj['companyname'], message: 'illegal symbol included'
            }],
            initialValue: submitData && submitData.fullName
          })(
            <Input placeholder='Please input your company name' maxLength={'100'} />
          )}
        </FormItem>
      </div>
      <div className='clearfix itemWrap'>
        <FormItem className='inputItem fl'>
          <p>Contact</p>
          {getFieldDecorator('contact', {
            rules: [{
              required: true, message: 'Please enter the contact'
            }, {
              pattern: T.regObj['otherName'], message: 'illegal symbol included'
            }],
            initialValue: (submitData && submitData.contact) || userName
          })(
            <Input placeholder='Please input the contact' maxLength={'50'} />
          )}
        </FormItem>

        <FormItem className='inputItem fl tinyInputItem'>
          <p>Country/Region</p>
          {getFieldDecorator('country', {
            rules: [
              { required: true, message: 'Please choose your country' }
            ],
            initialValue: submitData && submitData.country
          })(
            <Select placeholder='Country'>
              {countryDatasource && countryDatasource.map((item, index) =>
                <Option value={item.iso3} key={item.iso3}>{item.nameEn}</Option>
              )}
            </Select>
          )}
        </FormItem>
        <FormItem className='inputItem fl tinyInputItem'>
          <p>City</p>
          {getFieldDecorator('city', {
            rules: [{ required: true, message: 'Please enter the city' }, {
              pattern: T.regObj['otherName'], message: 'illegal symbol included'
            }],
            initialValue: submitData && submitData.city
          })(
            <Input placeholder='City' maxLength={'45'} />
          )}
        </FormItem>
      </div>

      <div className='clearfix itemWrap'>
        <FormItem className='inputItem fl'>
          <p>Phone</p>
          {getFieldDecorator('phone', {
            rules: [{ required: true, message: 'Please enter the phone number' }, {pattern: T.regObj['phoneNumber'], message: 'illegal symbol included'}],
            initialValue: submitData && submitData.phone
          })(
            <Input placeholder='Please input the phone number' maxLength={'32'} />
          )}
        </FormItem>
      </div>
      <div className='clearfix itemWrap'>
        <FormItem className='inputItem'>
          <Button type='primary' className='tinyBtn' htmlType='submit'>Next</Button>
        </FormItem>
      </div>
    </div>
  }
}

export default App
